<!-- 首次启动引导页组件 -->
<template>
  <transition leave-active-class="animated short fadeOut">
    <div class="guide unselected" v-if="isFirst">
      <van-swipe ref="swiper" :loop="false" indicator-color="white">
        <van-swipe-item v-for="(item, index) in slides" :key="index">
          <div
            class="img"
            :style="{ backgroundImage: 'url(' + item + ')' }"
          ></div>
          <span
            class="start-btn"
            v-show="index == slides.length - 1"
            @click="start"
          ></span>
        </van-swipe-item>
      </van-swipe>
    </div>
  </transition>
</template>

<script>
import { ref } from "vue";
export default {
  setup(props, ctx) {
    const isFirst = ref(
      window.isApp && !localStorage.getItem("isFirst") ? true : false
    );
    const slides = [
      require("@/assets/img/guide/s1.png"),
      require("@/assets/img/guide/s2.png"),
      require("@/assets/img/guide/s3.png"),
    ];
    const swiper = ref(null);

    const start = function () {
      localStorage.setItem("isFirst", true);
      isFirst.value = false;
    };

    return {
      isFirst,
      slides,
      swiper,
      start,
    };
  },
};
</script>
<style lang="less" scoped="">
.start-btn {
  position: absolute;
  z-index: 1;
  width: 1.2rem;
  height: 0.4rem;
  background: url("../assets/img/guide/start.png") no-repeat center/contain;
  left: 50%;
  bottom: 0.7rem;
  margin-left: -0.6rem;
}
.guide {
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  overflow: hidden;
  :deep(.van-swipe) {
    height: 100%;
    .van-swipe__indicators {
      bottom: 0.4rem;
    }
    .van-swipe__indicator {
      background-color: var(--white);
      width: 12px;
      height: 4px;
      opacity: 0.3;
      border-radius: 8px;
      transition: all ease-out 300ms;
      &.van-swipe__indicator--active {
        opacity: 1;
        width: 20px;
      }
    }
  }
  .img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
  }
}
</style>
